<#include "../common/nolayout.ftl"/>
<@html title_="${blog.title}" js_=['util.js']>
<link rel="stylesheet" href="${root}/tools/layui/css/layui.css" media="all" />
<div class="blog">
    <div class="container">
        <div class="blog-head heading">

        </div>
        <div class="blog-top">
            <div class="col-md-9 blog-left">
                <div class="blog-main">
                    <a href="single.html" class="bg" style="color: #0C0C0C">${blog.title}</a>
                    <p style="color:#666;font-style: italic;font-family: Baskerville,Georgia,"Liberation Serif","Kaiti SC",STKaiti,"AR PL UKai CN","AR PL UKai HK","AR PL UKai TW","AR PL UKai TW MBE","AR PL KaitiM GB",KaiTi,KaiTi_GB2312,"TW\-Kai",serif">${blog.abstracts}</p>
                </div>
                <div class="blog-main-one">
                    <div class="blog-one">
                        <img src="${blog.banner}" style="max-width: 91%" alt="" />
                        <p>${blogExt.content}</p>
                    </div>
                    <div class="blog-comments">
                        <ul>
                            <li><span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span><a href="#">100</a></li>
                            <li><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span><p>${(blog.insertDate)?string("yyyy-MM-dd HH:mm:ss")}</p></li>
                            <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span><a href="#">${nickname!username}</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>

                <div class="reply heading">
                    <div class="contact-form">
                        <form>
                            <textarea class="layui-textarea " style="height: 100px;max-width: 90%"  lay-verify="content" id="contents"></textarea>
                            <input type="submit" style="background: #4EAA4C" value="发表评论"/>
                        </form>
                    </div>
                </div>

                <div class="comments">
                    <div class="comments-top heading">
                        <h5>评论列表</h5>
                    </div>
                    <div class="comments-bottom">
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="http://ozygzlhwd.bkt.clouddn.com/my/love/IMG_2720.jpg?imageslim&imageView2/0/w/60/h/60" alt="" />
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">${nickname!username}</h4>
                                <p>1</p>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" src="http://ozygzlhwd.bkt.clouddn.com/my/love/IMG_2720.jpg?imageslim&imageView2/0/w/60/h/60" alt="" />
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">${nickname!username}</h4>
                                        <p>2</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <div class="col-md-3 blog-right" >
                <div class="categories">
                    <h3>相关博客</h3>
                    <ul id="abortBlogDataListBody"></ul>
                </div>
                <div class="categories">
                    <h3>最新博客</h3>
                    <ul id="newestBlogDataListBody"></ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<script src="${root}/tools/jquery/jquery.form.js"></script>
<script src="${root}/tools/layui/layui.js"></script>

<script id="newestBlogDataListTpl" type="text/html">
    {{#  if(d.list!=null&&d.list.length> 0){ }}
    {{#  layui.each(d.list, function(index, item){ }}
    <li><a href="/blog/{{item.blogId}}">{{item.title}}</a></li>
    {{#  }); }}
    {{#} else { }}
    暂无数据
    {{# }}}
</script>

<script id="abortBlogDataListTpl" type="text/html">
    {{#  if(d.list!=null&&d.list.length> 0){ }}
    {{#  layui.each(d.list, function(index, item){ }}
    <li><a href="/blog/{{item.blogId}}">{{item.title}}</a></li>
    {{#  }); }}
    {{#} else { }}
    暂无数据
    {{# }}}
</script>

<script>
    var id = '${id}';
    layui.config({
        base: "js/"
    }).use(['form', 'layer', 'jquery', 'laypage', 'laytpl', 'util'], function () {
        var form = layui.form
                , layer = parent.layer === undefined ? layui.layer : parent.layer
                ,laytpl = layui.laytpl, $ = layui.jquery;

        $("#headerBlogSpan").css({"color":"#97262A"});
        newestBlog();
        abortBlog();

        function newestBlog() {
            $.get('/blog/type/4', {"id":id}, function (data) {
                var listData = {"list": data.list};
                console.log(listData)
                var getTpl = newestBlogDataListTpl.innerHTML, view = document.getElementById('newestBlogDataListBody');

                laytpl(getTpl).render(listData, function (html) {
                    view.innerHTML = html;
                });

            })
        }

        function abortBlog() {
            $.get('/blog/type/1', {"id":id}, function (data) {
                var listData = {"list": data.list};
                console.log(listData)
                var getTpl = abortBlogDataListTpl.innerHTML, view = document.getElementById('abortBlogDataListBody');

                laytpl(getTpl).render(listData, function (html) {
                    view.innerHTML = html;
                });

            })
        }
    })

</script>
</@html>

